<template>
  <div>
    <template v-if="solutionId">
      <el-card class="box-card">
        <div v-if="status != 4">
          <el-button
            style="float:right"
            v-if="!status"
            class="reUpload_btn"
            :type="button_type"
            :loading="status === 0"
            round
          >
            {{ status_msg }}
          </el-button>
          <div class="title" v-if="status">
            <h1 v-if="status === 1">
              通过
              <el-button
                v-if="roleName !== 'student'"
                class="submitAnswer"
                plain
                icon="el-icon-upload2"
                @click="submitAnswer"
                >上传</el-button
              >
            </h1>
            <h1 class="errMsg" v-else>不通过</h1>
            <el-divider></el-divider>
          </div>
          <br />
          <div class="exec_content" style="text-align: left">
            <template v-if="status === 0">
              <div class="resultMsg.cpu_time">
                <label class="el-icon-loading"> </label>
                编译中: {{ resultMsg.compile_time }} 秒
              </div>
            </template>
            <template v-else-if="status === 2">
              <div class="error_message">
                <label class="el-icon-error"> 错误信息: </label>
                {{ resultMsg.error_msg }}
              </div>
            </template>
            <template v-else>
              <div class="resultMsg.cpuTime">
                <label class="el-icon-cpu"> CPU 时间: </label>
                {{ resultMsg.cpuTime }} ms
              </div>
              <el-divider></el-divider>
              <div class="resultMsg.memory">
                <label class="el-icon-suitcase-1"> 内存: </label>
                {{ resultMsg.memory }} KB
              </div>
              <el-divider></el-divider>
              <template v-if="status === 3">
                <div class="error_message">
                  <label class="el-icon-error errMsg"> 错误信息: </label>
                  {{ resultMsg.processResult }}
                </div>
                <el-divider></el-divider>
                <div class="error_io">
                  <!-- <div class="error_io" v-if="resultMsg.inputContent"> 如果有输入的样例输出  -->
                  <span
                    >输入样例：{{
                      resultMsg.inputContent ? resultMsg.inputContent : "无"
                    }}</span
                  ><br />
                  <span v-if="isDisplayRightAnswer">正确输出：{{ resultMsg.trueAnswer }}</span
                  ><br />
                  <span class="errMsg">你的输出：{{ resultMsg.userAnswer }}</span>
                </div>
              </template>
            </template>
          </div>
        </div>
        <div class="reUpload">
          <el-button
            class="reUpload_btn"
            v-if="reSubmit"
            :loading="submitLoading"
            icon="el-icon-upload"
            v-debounce="submit"
          >
            重新提交
          </el-button>
        </div>
      </el-card>
    </template>
    <template v-else>
      <el-button
        class="reUpload_btn"
        :loading="submitLoading"
        type="primary"
        icon="el-icon-upload"
        v-debounce="submit"
      >
        提交代码
      </el-button>
    </template>
  </div>
</template>

<script>
import { getResultId, getResult } from "@/api/solutions";
export default {
  name: "codeResult",
  props: {
    solutionId: {
      require: true
    },
    problemId: {
      require: true
    },
    submitLoading: {
      require: true
    },
    upload: {
      type: Function,
      require: true
    },
    isDisplayRightAnswer:{
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      roleName: "student",
      reSubmit: false, //再次提交按钮
      loading: true,
      /**
       * status分为:
       * 0 - 评判中
       * 1 - 通过
       * 2 - 编译失败
       * 3 - 错误
       * 4 - 提交失败
       */
      status: 1,
      //结果信息
      resultMsg: {
        error_msg: "",
        processResult: "",
        cpuTime: 0,
        memory: 0,
        compile_time: 0
      },
      timer: null
    };
  },
  created() {
    this.roleName = JSON.parse(localStorage.getItem("user")).roleName;
  },
  methods: {
    submitAnswer() {
      this.$emit("submitSuccessAnswer");
    },
    setCompileFail(msg) {
      //编译出错
      this.status = 2;
      this.resultMsg.error_msg = msg;
    },

    setExecSuccess(cpuTime, memory, execResult) {
      this.status = 1;
      this.resultMsg.cpuTime = cpuTime;
      this.resultMsg.memory = memory;
      this.resultMsg.processResult = execResult;
    },

    setExecError(errData) {
      //答案错误
      this.status = 3;
      this.resultMsg = errData;
    },

    inc_Time() {
      this.resultMsg.compile_time++;
      if (this.resultMsg.compile_time > 300) {
        this.$message.info("评判时间超过5分钟，请重新提交评判...");
        clearInterval(this.timer);
        this.reSubmit = true;
        this.status = 4;
      }
    },

    submit() {
      this.upload();
    },

    findResult() {
      getResultId(this.solutionId).then(res => {
        if (res.data.resultId) {
          this.findResultSuccess(res.data.resultId);
        } else {
          setTimeout(this.findResult, 1000);
        }
      });
    },

    findResultSuccess(resultId) {
      let obj = {
        resultId: resultId,
        problemId: this.problemId
      };
      console.log(obj);
      getResult(obj).then(res => {
        let data = res.data;
        console.log(data);
        if (!data.compilerResult) {
          this.setCompileFail(data.errorData); //编译出错
        } else if (data.processResult.toLowerCase() === "success") {
          this.setExecSuccess(data.cpuTime, data.memory, data.processResult);
        } else {
          this.setExecError(data); //答案错误
        }
        this.reSubmit = true;
      });
    }
  },
  computed: {
    status_msg() {
      const status = ["评判中", "通过", "编译出错", "答案错误","提交失败"];
      return status[this.status];
    },
    button_type() {
      const btnTypes = ["primary", "success", "danger", "danger"];
      return btnTypes[this.status];
    }
  },
  mounted() {},
  watch: {
    status: function(val) {
      if (val === 0) {
        this.timer = setInterval(this.inc_Time, 1000);
      } else {
        clearInterval(this.timer);
        this.resultMsg.compile_time = 0;
      }
    },
    solutionId: function(val) {
      this.reSubmit = false;
      this.status = 0;
      if (val == 0) {
        this.status=4;
        return;
      }
      this.findResult();
    }
  }
};
</script>
<style scoped>
.el-divider.el-divider--horizontal {
  margin: 15px 0;
}
.title {
  margin-top: -20px;
  text-align: center;
}
.box-card {
  padding: 0.1rem;
  width: 350px;
  position: relative;
  white-space: initial;
}
.reUpload {
  text-align: center;
}
.el-button.reUpload_btn {
  width: 150px;
  padding: 0;
  margin-top: 10px;
  color: white;
  height: 30px;
  line-height: 30px;
  background-color: #5b8bff;
  border-radius: 15px;
}
.error_io {
  padding-top: 5px;
}
.errMsg {
  color: #f56c6c;
}
.submitAnswer {
  margin-left: 20px;
}
</style>
